<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 区销售数据统计(地域) </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="12">
                    <div class="block">
                        <span class="demonstration">省：</span>
                        <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="block">
                        <span class="demonstration">日期选择：</span>
                        <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    合伙人总销量&nbsp;
                    {{ sumhhr }}
                </el-col>
                <el-col :span="6">
                    大客户总销量&nbsp;
                    {{ sumdkh }}
                </el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div>
                        销量排序：
                        <el-radio-group v-model="radio">
                            <el-radio :label="3" @change="changea">全部</el-radio>
                            <el-radio :label="6" @change="changea">降序</el-radio>
                            <el-radio :label="9" @change="changea">升序</el-radio>
                        </el-radio-group>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div>
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="合伙人" name="first">
                                <div v-show="radio === 3">
                                    <el-table :data="partners" style="width: 100%"
                                        ><!-- 升序ascending，降序descending -->
                                        <el-table-column
                                            prop="province"
                                            label="省"
                                            width="180"
                                            column-key="province"
                                            :filters="[
                                                { text: '北京市', value: '北京市' },
                                                { text: '上海市', value: '上海市' },
                                                { text: '四川省', value: '四川省' },
                                                { text: '广东省', value: '广东省' }
                                            ]"
                                            :filter-method="filterHandler"
                                        >
                                        </el-table-column>
                                        <el-table-column prop="city" label="市" width="180"> </el-table-column>
                                        <el-table-column prop="area" label="区" width="180"> </el-table-column>
                                        <el-table-column prop="sales" label="销量" width="180"> </el-table-column>
                                    </el-table>
                                </div>
                                <div v-show="radio === 6">
                                    <el-table :data="partners" style="width: 100%" :default-sort="styleObject1"
                                        ><!-- 升序ascending，降序descending -->
                                        <el-table-column prop="province" label="省" width="180"> </el-table-column>
                                        <el-table-column prop="city" label="市" width="180"> </el-table-column>
                                        <el-table-column prop="area" label="区" width="180"> </el-table-column>
                                        <el-table-column prop="sales" label="销量" width="180"> </el-table-column>
                                    </el-table>
                                </div>
                                <div v-show="radio === 9">
                                    <el-table :data="partners" style="width: 100%"  :default-sort="styleObject2"
                                        ><!-- 升序ascending，降序descending -->
                                        <el-table-column prop="province" label="省" width="180"> </el-table-column>
                                        <el-table-column prop="city" label="市" width="180"> </el-table-column>
                                        <el-table-column prop="area" label="区" width="180"> </el-table-column>
                                        <el-table-column prop="sales" label="销量" width="180"> </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="大客户" name="second">
                                <div v-show="radio === 3">
                                    <el-table :data="counts" style="width: 100%">
                                        <el-table-column prop="province" label="省" width="180"> </el-table-column>
                                        <el-table-column prop="city" label="市" width="180"> </el-table-column>
                                        <el-table-column prop="area" label="区" width="180"> </el-table-column>
                                        <el-table-column prop="sales" label="销量" width="180"> </el-table-column>
                                    </el-table>
                                </div>
                                <div v-show="radio === 6">
                                    <el-table :data="counts" style="width: 100%"  :default-sort="styleObject1">
                                        <el-table-column prop="province" label="省" width="180"> </el-table-column>
                                        <el-table-column prop="city" label="市" width="180"> </el-table-column>
                                        <el-table-column prop="area" label="区" width="180"> </el-table-column>
                                        <el-table-column prop="sales" label="销量" width="180"> </el-table-column>
                                    </el-table>
                                </div>
                                <div v-show="radio === 9">
                                    <el-table :data="counts" style="width: 100%"  :default-sort="styleObject2">
                                        <el-table-column prop="province" label="省" width="180"> </el-table-column>
                                        <el-table-column prop="city" label="市" width="180"> </el-table-column>
                                        <el-table-column prop="area" label="区" width="180"> </el-table-column>
                                        <el-table-column prop="sales" label="销量" width="180"> </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="choicepage">
                        <span class="demonstration"></span>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage2"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="30"
                            layout="sizes, prev, pager, next"
                            :total="30"
                        >
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'dataStatistics',
    data() {
        return {
            options: [
                {
                    value: '选项1',
                    label: '北京',
                    children: [
                        {
                            value: '选项1.1',
                            label: '北京',
                            children: [
                                {
                                    value: '选项1.1.1',
                                    label: '东城区'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: '选项2',
                    label: '上海',
                    children: [
                        {
                            value: '选项2.1',
                            label: '上海',
                            children: [
                                {
                                    value: '选项2.1.1',
                                    label: '浦东区'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: '选项3',
                    label: '四川',
                    children: [
                        {
                            value: '选项3.1',
                            label: '成都',
                            children: [
                                {
                                    value: '选项1.1.1',
                                    label: '双流区'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: '选项4',
                    label: '广东',
                    children: [
                        {
                            value: '选项4.1',
                            label: '深圳',
                            children: [
                                {
                                    value: '选项1.1.1',
                                    label: '南山区'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: '选项5',
                    label: '广西',
                    children: [
                        {
                            value: '选项5.1',
                            label: '南宁',
                            children: [
                                {
                                    value: '选项1.1.1',
                                    label: '青秀区'
                                }
                            ]
                        }
                    ]
                }
            ],
            partners: [],
            counts: [],
            value: '',
            radio: 3,
            activeName: 'first',
            value1: '',
            sumhhr: 154,
            sumdkh: 10,
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            styleObject1: {
                prop: 'sales',
                order: 'descending'
            },
            styleObject2: {
                prop: 'sales',
                order: 'ascending'
            }
        };
    },
    watch: {
        radio() {
            console.log(111);
            if (this.radio == '6') {
                this.$set(this.styleObject1, 'order', 'ascending');
            } else if (this.radio == '9') {
                this.$set(this.styleObject1, 'order', 'descending');
            }
            console.log(this.styleObject1.order);
            this.$forceUpdate();
        }
    },
    methods: {
        changea() {},
        handleChange(value) {
            console.log(value);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        resetDateFilter() {
            this.$refs.filterTable.clearFilter('date');
        },
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        getCustomerData() {
            // 查询订单表和大客户和合伙人表
            this.$axios.get('/api/getCustomerData').then((res) => {
                this.sumhhr = res.data.data.res2;
                this.sumdkh = res.data.data.korder;
                this.xxtj = res.data.data.res; //销售统计
            });
        },
        getAreakeyData() {
            // 查询大客户和合伙人表
            this.$axios({
                method: 'get',
                url: '/api/getAreakeyData'
            }).then((response) => {
                if (response.data.code == 200) {
                    console.log(response);
                    this.counts = response.data.counts;
                    this.partners = response.data.partners;
                } else {
                    console.log(response);
                }
            });
        }
    },
    mounted: function () {
        //自动触发写入的函数
        this.getCustomerData();
        this.getAreakeyData();
    },
    computed: {}
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
/*  */
.el-row {
    margin-bottom: 40px;
}
.el-col {
    border-radius: 4px;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
